<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>省广首页</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <link rel="stylesheet" href="css/index.css">
        <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" rel="stylesheet">

        <style>
            
        </style>
    </head>
    <body>
        <!-- 头部 -->
        <header>
            <div class="logo-box">
                <img src="assets/img/logo.png" alt="">
            </div>
            <div class="search-box">
                <a href="search.html">
                    <img src="assets/img/search-logo.png" alt="">
                </a>
            </div>
            <style>
                .swiper-pagination-bullet {
                background-color: #fff;
                
            }

            .swiper-pagination-bullet-active {
                background-color: red;
            }
            </style>
        </header>
        
        <footer>
            <ul>
                <li>
                    <a href="index.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-1.png" alt="">
                        </div>
                        <p>首页</p>
                    </a>
                    
                </li>
                <li>
                    <a href="course.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-2.png" alt="">
                        </div>
                        <p>GIMC</p>
                    </a>        
                </li>
                <li>
                    <a href="article.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-3.png" alt="">
                        </div>
                        <p>文章</p>
                    </a>
                </li>
                <li>
                    <a href="resource.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-4.png" alt="">
                        </div>
                        <p>资源</p>
                    </a>
                </li>
                <li>
                    <a href="course2.html">
                        <div class="foot-logo">
                            <img src="assets/img/pic6-5.png" alt="">
                        </div>
                        <p>学院</p>
                    </a>
                </li>
            </ul>
        </footer>

        <section class="content">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/new.png" alt="">
            
                            <div class="mask-layer">
                                <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                                <div class="mask-text">
                                    <div class="like">
                                        <p class="love">
                                            <img src="assets/img/love.png" alt="love">
                                            999
                                        </p>
                                        <p class="eye">
                                            <img src="assets/img/eye.png" alt="">
                                            666
                                        </p>
                                    </div>
                                    <!-- <div class="circle">
                                        <img src="assets/img/article-redradio.png" class="red" alt="">
                                        <img src="assets/img/white-radio.png" class="white" alt="">
                                    </div> -->
                                    <div class="time">
                                        12月26日 07:33:43
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/new.png" alt="">
            
                            <div class="mask-layer">
                                <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                                <div class="mask-text">
                                    <div class="like">
                                        <p class="love">
                                            <img src="assets/img/love.png" alt="love">
                                            999
                                        </p>
                                        <p class="eye">
                                            <img src="assets/img/eye.png" alt="">
                                            666
                                        </p>
                                    </div>
                                    <!-- <div class="circle">
                                        <img src="assets/img/article-redradio.png" class="red" alt="">
                                        <img src="assets/img/white-radio.png" class="white" alt="">
                                    </div> -->
                                    <div class="time">
                                        12月26日 07:33:43
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/new.png" alt="">
            
                            <div class="mask-layer">
                                <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                                <div class="mask-text">
                                    <div class="like">
                                        <p class="love">
                                            <img src="assets/img/love.png" alt="love">
                                            999
                                        </p>
                                        <p class="eye">
                                            <img src="assets/img/eye.png" alt="">
                                            666
                                        </p>
                                    </div>
                                    <!-- <div class="circle">
                                        <img src="assets/img/article-redradio.png" class="red" alt="">
                                        <img src="assets/img/white-radio.png" class="white" alt="">
                                    </div> -->
                                    <div class="time">
                                        12月26日 07:33:43
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="banner">
                            <img src="assets/img/new.png" alt="">
            
                            <div class="mask-layer">
                                <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                                <div class="mask-text">
                                    <div class="like">
                                        <p class="love">
                                            <img src="assets/img/love.png" alt="love">
                                            999
                                        </p>
                                        <p class="eye">
                                            <img src="assets/img/eye.png" alt="">
                                            666
                                        </p>
                                    </div>
                                    <!-- <div class="circle">
                                        <img src="assets/img/article-redradio.png" class="red" alt="">
                                        <img src="assets/img/white-radio.png" class="white" alt="">
                                    </div> -->
                                    <div class="time">
                                        12月26日 07:33:43
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            
            
            <div class="news">
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前[案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/pic1.png" alt="">
                    </div>
                </div>
                
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>666</span>
                        </div>
                        <span>5小时前[课程] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/pic1.1.png" alt="">
                    </div>
                </div>
                
                <div class="article"></div>
                
                <div class="article">
                    <p>
                        #苍井空#互联网卖内衣全球引爆声量飙至7.9亿
                    </p>
                    <div class="img3">
                        <div class="imgbox1">
                            <img src="assets/img/img1.png" alt="">
                        </div>
                        <div class="imgbox2">
                            <img src="assets/img/img2.png" alt="">
                        </div>
                        <div class="imgbox3">
                            <img src="assets/img/img3.png" alt="">
                        </div>
                    </div>

                    <div class="bottom-box">
                        <div class="l-box">
                            <p class="p1">
                                <img src="assets/img/head.png" alt="">
                                陈正光
                            </p>
                            <p class="p2">
                                <img src="assets/img/discuss.png" alt="">
                                1314
                            </p>
                            <p class="p3">
                                <img src="assets/img/grey-love.png" alt="">
                                8888
                            </p>
                        </div>
                        <div class="r-box">
                            <p>2天前</p>
                            <span>[案例观点]</span>
                        </div>
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前[案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/pic3.png" alt="">
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前[案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/gnight.png" alt="">
                    </div>
                </div>
                <div class="article">
                    <p>
                        #苍井空#互联网卖内衣全球引爆声量飙至7.9亿
                    </p>
                    <div class="img3">
                        <div class="imgbox1">
                            <img src="assets/img/img1.png" alt="">
                        </div>
                        <div class="imgbox2">
                            <img src="assets/img/pic4-2.png" alt="">
                        </div>
                        <div class="imgbox3">
                            <img src="assets/img/pic4-3.png" alt="">
                        </div>
                    </div>

                    <div class="bottom-box">
                        <div class="l-box">
                            <p class="p1">
                                <img src="assets/img/head.png" alt="">
                                陈正光
                            </p>
                            <p class="p2">
                                <img src="assets/img/discuss.png" alt="">
                                1314
                            </p>
                            <p class="p3">
                                <img src="assets/img/grey-love.png" alt="">
                                8888
                            </p>
                        </div>
                        <div class="r-box">
                            <p>2天前</p>
                            <span>[案例观点]</span>
                        </div>
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前[案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/pic3.png" alt="">
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前[案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/gnight.png" alt="">
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前 [案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/pic5.png" alt="">
                    </div>
                </div>
                <div class="article">
                    <div class="text">
                        <p class="p-up">#苍井空#互联网卖内衣全球 引爆声量飙至7.9亿</p>
                        <div class="p-below">
                            <img src="assets/img/grey-love.png" alt="">
                            <span>520</span>
                        </div>
                        <span>2小时前 [案例观点] </span>  
                    </div>
                    <div class="photo">
                        <img src="assets/img/MK.png" alt="">
                    </div>
                </div>
                <div class="more">
                    加载更多
                </div>
            </div>
        </section>

        <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
        <script>        
            var mySwiper = new Swiper ('.swiper-container', {
              loop: false, // 循环模式选项
              
              
              pagination: {
                el: '.swiper-pagination',
              },
              
              // 如果需要前进后退按钮
            //   navigation: {
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            //   },
              
             
            })        
            </script>
        
            
        
    </body>
</html>